<template>
  <div id="bannerPage">
    <div class="actionBar">
      <div>
        当前状态：共<span>{{total}}</span>条
      </div>
      <div class="build" @click="bulidBanner">+新增</div>
      <el-dialog :visible.sync="dialog"
                  size="tiny">
        <el-form label-width="100px">
          <el-form-item label="banner图上传">
            <span style="display:inline-block;width:200px;height:60px;border:1px solid #ddd;cursor:pointer;border-radius:4px">
              <input type="file" @change="getFile($event)"/>
            </span>
          </el-form-item>
          <el-form-item label="标题">
            <el-input v-model="formData.infoTitle"></el-input>
          </el-form-item>
          <el-form-item label="上线时间">
            <el-date-picker v-model="formData.publishTime"
                            type="datetime"
                            placeholder="选择上线时间"
                            align="right">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="下线时间">
            <el-date-picker v-model="formData.expireTime"
                            type="datetime"
                            placeholder="选择下线时间"
                            align="right">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="跳转链接">
            <el-input v-model="formData.infoUrl"></el-input>
          </el-form-item>
          <el-button type="primary" :loading="load" @click="formSubmit">提交</el-button>
        </el-form>
      </el-dialog>
    </div>
    <table class="table">
      <thead>
        <tr>
          <th>排序</th>
          <th>图片</th>
          <th>标题</th>
          <th>链接地址</th>
          <th>发布时间</th>
          <th>过期时间</th>
          <th>公布范围</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableData" :id="item.infoId" :data-col="item.clsId" :rank="item.rank" :data-sort="index">
          <td>{{index + 1}}</td>
          <td><img :src="item.infoMainImg"/></td>
          <td>{{item.infoTitle}}</td>
          <td><a :href="item.infoUrl">{{item.infoUrl}}</a></td>
          <td>{{item.publishTime}}</td>
          <td>{{item.expireTime}}</td>
          <td>{{item.publishStatus === 1 ? '已发布' : item.publishStatus === 0 ? '未发布' : '已过期'}}</td>
          <td style="font-size: 20px">
            <i class="el-icon-caret-top" @click="moveup($event)"></i>
            <i class="el-icon-caret-bottom" @click="moveup($event)"></i>
            <i class="el-icon-edit" @click="edit($event)"></i>
            <i class="el-icon-delete" @click="remove($event)"></i>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
  import axios from 'axios'
  export default{
    name: 'bannerPage',
    data () {
      return {
        tableData: [],
        total: 0,
        dialog: false,
        load: false,
        form_token: '',
        formData: {
          file: '',
          infoTitle: '',
          publishTime: '',
          expireTime: '',
          infoUrl: '',
          infoId: ''
        },
        action: ''
      }
    },
    beforeCreate () {
      this.$store.commit('CHANGESTATE', [1, 0, 0, 0])
      this.$store.commit('CHANGESTATECOL', [1, 0])
    },
    created () {
      this.axios(1)
    },
    methods: {
      // 加载页面
      axios (index) {
        axios({
          headers: {'Content-Type': 'application/x-www-form-urlencoded'},
          url: this.$store.state.baseURI + 'oss/banner/list',
          method: 'get',
          params: {
            page_num: index,
            token: this.$store.state.token
          }
        }).then(obj => {
          if (obj.data.code === 100) {
            this.total = obj.data.data.total
            this.tableData = obj.data.data.list
          } else {
            // this.$router.push('/')
          }
        })
      },
      // 上移
      moveup (event) {
        var sort = Math.floor(event.path[2].getAttribute('data-sort'))
        if (sort === 0) return false
        var frtId = this.tableData[sort].infoId
        var frtRank = this.tableData[sort].rank
        var secId = this.tableData[sort - 1].infoId
        var secRank = this.tableData[sort - 1].rank
        console.log(frtId, frtRank, secId, secRank)
        axios({
          // headers: {'Content-Type': 'application/x-www-form-urlencoded'},
          url: this.$store.state.baseURI + 'oss/banner/sort',
          method: 'post',
          params: {
            frt_id: secId,
            frt_rank: secRank,
            sec_id: frtId,
            sec_rank: frtRank,
            token: this.$store.state.token
          }
        }).then(obj => {})
      },
      bulidBanner () {
        this.dialog = true
        this.getFormToken()
      },
      edit (event) {
        this.formData = this.tableData[event.path[2].getAttribute('data-sort')]
        this.dialog = true
        this.getFormToken()
      },
      getFile (event) {
        this.formData.file = event.target.files[0]
      },
      formSubmit () {
        var formData = new FormData()
        var that = this
        formData.append('token', this.$store.state.token)
        formData.append('form_token', this.form_token)
        formData.append('file', this.formData.file)
        formData.append('title', this.formData.infoTitle)
        formData.append('publish_time', this.formatTime(this.formData.publishTime))
        formData.append('expire_time', this.formatTime(this.formData.expireTime))
        formData.append('jump_url', this.formData.infoUrl)
        formData.append('id', this.formData.infoId)
        var xhr = new XMLHttpRequest()
        if (this.formData.infoId === '') xhr.open('POST', this.$store.state.baseURI + 'oss/banner/add')
        else xhr.open('POST', this.$store.state.baseURI + 'oss/banner/update')
        xhr.onload = function (event) {
          if (xhr.status === 200) {
            var obj = JSON.parse(xhr.responseText)
            that.axios(1)
            if (obj.code === 100) {
              that.dialog = false
              that.$message({
                message: '操作成功',
                type: 'success'
              })
            } else {
              that.$message.error(obj.message)
            }
          }
        }
        xhr.send(formData)
      },
       // 删除行
      remove (event) {
        var id = event.path[2].getAttribute('id')
        var sort = Math.floor(event.path[2].getAttribute('data-sort'))
        this.$confirm('此操作将永久删除该行内容, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios({
            url: this.$store.state.baseURI + 'oss/banner/delete',
            method: 'post',
            params: {token: this.$store.state.token, id: id}
          }).then(obj => {
            if (obj.data.code === 100) {
              this.tableData.splice(sort + 1, 1)
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    }
  }
</script>
<style>
  .modal{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .4);
  }
  .modal > div{
    box-sizing: border-box;
    width: 570px;
    background: #FFFFFF;
    border-radius: 4px;
    margin: 200px auto 0;
  }
  .modal > div > .modal_header{
    padding: 12px 20px 11px;
    border-bottom: 1px solid #e8e8e8;
    font-size: 16px;
    color: #333;
    text-align: left;
  }
  .modal > div > .modal_header > div{
    float: right;
    cursor: pointer;
  }
  .form{
    padding: 20px 80px;
  }
  .form-group{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
  }
  .form-group > label:first-child{
    width: 80px;
    font-size: 16px;
  }
  .form-group > input{
    display: block;
    padding: 12px 20px;
    background: #FFFFFF;
    border: 1px solid #E8E8E8;
    box-shadow: 0 0px 1px 0 rgba(153,153,153,0.30);
    border-radius: 4px;
    width: calc(100% - 150px);
    font-size: 14px;
  }
  .form-group > input::-webkit-input-placeholder{
    color: #A5AFBA;
  }
  .btn{
    width: 132px;
    height: 40px;
    background: #037CFC;
    box-shadow: 0 1px 2px 0 rgba(153,153,153,0.30);
    border-radius: 4px;
    border: none;
    color: #fff;
    font-size: 18px;
    letter-spacing: 2px;
    cursor: pointer;
  }
</style>
